import styles from './index.less';
import { useLocation, NavLink } from 'umi';
import site from '@/config/site.json';
import _ from 'lodash';
import { menuConfig } from '@/config/menuConfig';
import { Fragment } from 'react';

const Slider = () => {
  const pathname = useLocation().pathname.substring(1);
  const site_header = pathname.split('/')[site.site_number];
  console.log(site_header);

  const menu = menuConfig[site_header];
  const menu_item_group: (data: any) => any = (data) => {
    if (!_.isArray(data) && typeof data === 'object') {
      const newData = [];
      for (let i in data) {
        newData.push(
          <Fragment key={i}>
            <li title={i}>
              <a>{i}</a>
            </li>
            {renderMenu(data[i])}
          </Fragment>,
        );
      }
      return newData;
    } else {
      return renderMenu(data);
    }
  };
  const renderMenu: (data: any) => any = (data) => {
    return _.map(data, (item, key) => {
      if (item.children) {
        return (
          <li key={item.id}>
            <a>
              {item.path ? (
                <NavLink to={item.path}>{item.title}</NavLink>
              ) : (
                item.title
              )}
            </a>
            <ul>{renderMenu(item.children)}</ul>
          </li>
        );
      }
      return (
        <li key={item.id}>
          <NavLink to={item.path}>{item.title}</NavLink>
        </li>
      );
    });
  };

  return (
    <div className={styles.slider}>
      <ul className={styles.menuList}>{menu_item_group(menu)}</ul>
    </div>
  );
};

export default Slider;
